{% extends 'customer_dashboard.html' %}

{% block content %}
<style>
  .card {
    background-color: #f5f9ff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 720px;
    margin: 0 auto;
  }

  .card h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .transaction-item {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 15px;
  }

  .transaction-item p {
    margin: 6px 0;
    font-size: 15px;
    color: #333;
  }

  .no-record {
    background-color: #f8f9fa;
    border-radius: 10px;
    border-left: 5px solid #ccc;
    padding: 20px;
    text-align: center;
    color: #777;
    margin-top: 30px;
  }

  .no-record i {
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
  }
</style>

<div class="card">
  <h2><i class="bi bi-card-list"></i> 交易记录</h2>
  <p style="text-align: center; color: #555; margin-bottom: 20px;">
    以下是您账户中所有银行卡的交易历史：
  </p>

  {% if transactions %}
    {% for tx in transactions %}
    <div class="transaction-item">
      <p><i class="bi bi-credit-card-2-back"></i> <strong>卡号：</strong>{{ tx['cardID'] }}</p>
      <p><i class="bi bi-clock"></i> <strong>交易时间：</strong>{{ tx['tradeDate'] }}</p>
      <p><i class="bi bi-shuffle"></i> <strong>交易类型：</strong>{{ tx['tradeType'] }}</p>
      <p><i class="bi bi-cash"></i> <strong>交易金额：</strong>{{ "%.2f"|format(tx['tradeMoney']) }} 元</p>
      <p><i class="bi bi-info-circle"></i> <strong>备注：</strong>{{ tx['remark'] or '无' }}</p>
    </div>
    {% endfor %}
  {% else %}
    <div class="no-record">
      <i class="bi bi-info-circle"></i>
      暂无交易记录
    </div>
  {% endif %}
</div>
{% endblock %}
